﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="../backPage/css/reset.css" rel="stylesheet" />
    <link href="../backPage/css/iconfont.css" rel="stylesheet" />
    <link href="../backPage/css/index.css" rel="stylesheet" />
    <script src="../backPage/js/jquery-1.9.1.min.js"></script>
    <script src="../backPage/js/f.js"></script>
    <title>订单管理</title>
</head>
<body>
    <div class="PublicHead clearfix">
        <div class="leftBox clearfix">
            <div class="companyLogo">
                <img src="../backPage/images/logo.jpg" />
            </div>
            <!--<i class="iconfont icon-caidan"></i>-->

            <div class="companyText">
                XXX管理系统
            </div>
        </div>
        <div class="RightBox clearfix">
            <div class="UserPhotoBox">
                <div class="UserPic">
                    <img src="../backPage/images/user.jpg" />
                </div>
                <div class="UserName">
                    管理员
                </div>
            </div>
            <a href="index.html">
                <div class="dropOutBox">
                    <i class="iconfont icon-app_icons--">
                    </i>
                    <span>退出</span>
                </div>
            </a>
        </div>
    </div>

    <div class="PublicDownWhole clearfix">
        <!--左侧-->
        <div class="leftBox">
            <ul>
                <a href="UserManagement.html"> <li class=""><i class="iconfont icon-yonghuguanli"></i><span>用户管理</span></li></a>
                <a href="OrderManagement.html">
                    <li class="Select"><i class="iconfont icon-tubiao_dingdan"></i><span>订单管理</span></li>
                </a>
                <a href="ClassificationManagement.html">
                    <li><i class="iconfont icon-fenlei"></i><span>分类管理</span></li>
                </a>
                <a href="ProductManagement.html">      <li><i class="iconfont icon-weibiaoti1"></i><span>产品管理</span></li></a>
            </ul>
        </div>
        <!--右侧-->
        <div class="RightBox">
            <div class="PublicContentBox">
                <!--公用指向页面名字-->
                <div class="PublicPointToAgeText">
                    <span class="span1">订单管理 </span> <span class="span2">后台订单管理列表</span>
                </div>
                <!--查询-->
                <div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">订单号：</div>
                        <div class="InputDiv">   <input id="order-number" class="phoneInput" placeholder="请输入你需要查询的订单号" /></div>
                    </div>
                    <div onclick="selOrder()" class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span>查询</span>
                    </div>
                </div>
                <!--表修改-->
                <div class="InquireTableBox">
                    <div class="headbox">
                        <div class="headboxtext">
                            <span class="span1">后台订单管理列表</span>
                        </div>
                        <!--批量删除-->
                        <div onclick="batchDel()" class="PublicBtnIcon Color5Btn">
                            <i class="iconfont  icon-shanchu"></i>
                            <span>批量删除</span>
                        </div>

                        <!--<div class="PublicBtnIcon Color2Btn fr Js_edit">
                            <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                            <span>添加</span>
                        </div>-->
                    </div>

                    <!--查询到的表格-->

                    <div class="InquireSelectTable">
                        <table class="PublicTableCss">
                            <thead>
                                <tr>
                                    <td>
                                        <input id="inputcheck" class="inputcheck" type="checkbox" name="inputcheck" value="0" />
                                        <label for="inputcheck" onclick="selAll()"></label>
                                        <span>全选</span>
                                    </td>
                                    <td>序号</td>
                                    <td>姓名</td>
                                    <td>手机号</td>
                                    <td>地址</td>
                                    <td>应付金额</td>
                                    <td>订单编号</td>
                                    <td>支付方式</td>
                                    <td>下单时间</td>
                                    <td>操作</td>
                                </tr>

                            </thead>
                            <tbody id="order-list">
                            </tbody>
                        </table>

                    </div>
                    <!--分页-->
                    <div id="page-clier" class="PageNumber">
                        <div class="NumbersBox">
                            <ul id="product-management-page">
                                <li class="Select">1</li>
                                <li class="">2</li>
                                <li class="">...</li>
                                <li class="">4</li>
                                <li class="">5</li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>

        </div>
    </div>


    <!-- alert通用 提示是否删除-->
    <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>提示消息</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">
                <!--提示消息内容-->
                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>确定删除此信息？</span>
                </div>
                <!--按钮-->
                <div class="f_pormatBtn  clearfix">
                    <div onclick="delBrand()" class="f_pormatBtn1">
                        确定
                    </div>
                    <div onclick="cancel()" class="f_pormatBtn2">
                        删除
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

    // 页面加载完成事件
    $(function () {

        // 页面数据加载
        $.get("/admin_order/find_order_all.do", {page: 1, size: 5}, function (json) {
            console.log(json);
            if(json.code == 200){
                orderList(json);
            }else{
                alert("暂无订单数据");
            }
        }, "json");

    });

    // 遍历订单数据
    function orderList(json) {
        // 清空列表
        $("#order-list").empty();

        // 循环遍历结果
        for (var i=0; i<json.data.list.length; i++){

            var payMethod = "";
            if(json.data.list[i].payMethod == 1){
                payMethod = "微信支付";
            }else if(json.data.list[i].payMethod == 2){
                payMethod = "支付宝支付";
            }else{
                payMethod = "其他支付";
            }

            // 时间转化
            var date = new Date(json.data.list[i].createTime).toLocaleString();

            var tr = '<tr><td><input id="chack'+json.data.list[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+json.data.list[i].id+'" />' +
                '                <label for="chack'+json.data.list[i].id+'"></label></td><td>'+(i+1)+'</td><td>'+json.data.list[i].address.createdUser+'</td>' +
                '                <td>'+json.data.list[i].address.phone+'</td><td>'+(json.data.list[i].address.district+" "+json.data.list[i].address.address)+'</td>' +
                '                <td>'+json.data.list[i].orderPrice+'.00元</td><td>'+json.data.list[i].orderNumber+'</td><td>'+payMethod+'</td>' +
                '                <td>'+date+'</td><td>' +
                '                <div onclick="del('+json.data.list[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete"><i class="iconfont icon-shanchu"></i>' +
                '                <span>删除</span></div></td></tr>';
            $("#order-list").append(tr);

        }

        // 在页码前添加上一页按钮
        if(json.data.hasPreviousPage){
            // 删除哥哥元素
            $("#top-page").remove();
            $("#product-management-page").before('<div id="top-page" onclick="orbase('+(json.data.pageNum-1)+')" class="LeftArrow">上一页</div>');
        }
        var pageSums = json.data.navigatepageNums; 
        // 清空分页列表
        $("#product-management-page").empty();
        // 遍历分页
        for (var j=0; j<pageSums.length; j++ ) {
            var li = '';
            if (json.data.pageNum == (j + 1)){
                li = '<li class="Select" onclick="orbase('+(j+1)+')">'+pageSums[j]+'</li>';
            }else{
                li = '<li class="" onclick="orbase('+(j+1)+')">'+pageSums[j]+'</li>';
            }
            $("#product-management-page").append(li);
        }
        // 在页码后添加下一页按钮
        if(json.data.hasNextPage){
            // 删除弟弟元素
            $("#dow-page").remove();
            $("#product-management-page").after('<div id="dow-page" onclick="orbase('+(json.data.pageNum+1)+')" class="RightArrow ">下一页</div>');
        }
    }

    // 点击分页按钮查询用户数据
    function orbase(pageSum) {
        // 发起post请求
        $.get("/admin_order/find_order_all.do",{page: pageSum, size: 5},function(json) {
            // 判断服务器返回的状态
            if (json.code == 200) {
                orderList(json);
            }else{
                alert(json.message);
            }
        }, "json");
    }

    // 多选框的全选
    function selAll() {
        var selAll = document.getElementById("inputcheck");
        selAll.checked = !selAll.checked;
        // 获取多选框对象
        var ches = document.getElementsByName("inputcheck");
        for(var i=0;i<ches.length;i++){
            ches[i].checked = !ches[i].checked;
        }
    }

    // 批量删除
    function batchDel() {
        // 获取选中的复选框的值
        var ids = new Array();
        $('input[name="inputcheck"]:checked').each(function(){
            // 判断是有全选按钮的值，如果有则不添加
            if ($(this).val() != 0) {
                ids.push($(this).val());//向数组中添加元素
            }
        });
        console.log(ids);
        // 调用后端接口执行批量删除操作
        $.ajax({
            url:"/admin_order/delete_batch_order_By_id.do",
            type: "post",
            traditional:true,
            data: {ids: ids},
            dataType: "json",
            success: function (json) {
                // 判断状态。
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }

    // 删除按钮(弹框)
    function del(uid) {
        id = uid;
        $(".f_delete").fadeIn(200);
    }
    // 删除操作
    function delBrand() {
        // 发起post请求
        $.post("/admin_order/delete_order_by_id.do", {id: id}, function (json) {
            // 判断响应状态码
            if (json.code == 200) {
                location.reload();
            }else{
                alert(json.message);
            }
        }, "json");
    }
    // 取消删除
    function cancel() {
        // 关闭弹出层
        $(".adduser,.f_delete").fadeOut(200);
    }

    // 查询操作
    function selOrder() {
        // 获取输入框的值
        var number = $("#order-number").val();
        $.post("/admin_order/select_order_by_order_number.do", {orderNum: number}, function (json) {
            console.log(json);
            if(json.code == 200){
                // 清空列表
                $("#order-list").empty();

                // 循环遍历结果
                for (var i=0; i<json.data.length; i++){

                    var payMethod = "";
                    if(json.data[i].payMethod == 1){
                        payMethod = "微信支付";
                    }else if(json.data[i].payMethod == 2){
                        payMethod = "支付宝支付";
                    }else{
                        payMethod = "其他支付";
                    }

                    // 时间转化
                    var date = new Date(json.data[i].createTime).toLocaleString();

                    var tr = '<tr><td><input id="chack'+json.data[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+json.data[i].id+'" />' +
                        '                <label for="chack'+json.data[i].id+'"></label></td><td>'+(i+1)+'</td><td>'+json.data[i].address.createdUser+'</td>' +
                        '                <td>'+json.data[i].address.phone+'</td><td>'+(json.data[i].address.district+" "+json.data[i].address.address)+'</td>' +
                        '                <td>'+json.data[i].orderPrice+'.00元</td><td>'+json.data[i].orderNumber+'</td><td>'+payMethod+'</td>' +
                        '                <td>'+date+'</td><td>' +
                        '                <div onclick="del('+json.data[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete"><i class="iconfont icon-shanchu"></i>' +
                        '                <span>删除</span></div></td></tr>';
                    $("#order-list").append(tr);

                }
            }else{
                alert("没有订单数据");
            }
        }, "json");
    }


</script>
</html>